<template>
	<div id="sq-goto-top" @click="gotoTop">
    <img src="../assets/goto_top.png" width="27px" height="27px"/>
	</div>
</template>

<script>

import { mapGetters } from 'vuex';

export default {
  name: 'sq-goto-top-button',
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters([
      'showListenBar',
      'showBuyBar'
    ])
  },
  created () {
  },
  methods: {
    gotoTop: function() {
      window.document.body.scrollTop = 0;
      window.document.documentElement.scrollTop = 0;
      this.$el.style.display = 'none';
    },
    handleScroll: function(){
      const scrollY = window.document.documentElement.scrollTop || window.document.body.scrollTop;
      if(scrollY > 100){
        this.$el.style.display = '';
      }else{
        this.$el.style.display = 'none';
      }
    },
    updateMargin: function(){
        if(!this.$el){
            return;
        }
        const showBuyBar = this.$store.getters.showBuyBar;
        const showListenBar = this.$store.getters.showListenBar;
        var bottom = 0;
        if(showBuyBar) {
            bottom += 44;
        }
        if(showListenBar) {
          bottom += 44;
        }
        this.$el.style.bottom = bottom + 'px';
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
    this.$el.style.display = 'none';
    this.updateMargin();
  },
  watch: {
    showListenBar () {
      this.updateMargin();
    },
    showBuyBar () {
      this.updateMargin();
    }
  }
}
</script>

<style scoped>

#sq-goto-top {
  position: fixed;
  right: 0px;
  bottom: 0px;
  width: 51px;
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
